<template>
  <div class="freeze_student">
    <el-dialog :title="isFreeze ? '冻结次课' : '冻结详情'" :visible.sync="visible" @close="handleCancel">
      <div v-if="isFreeze">
        <div v-if="studentInfo.expiresStartTime">
          <el-form v-bind="getFormProps()" :model="form" ref="form" :label-position="labelPosition">
            <el-form-item label="学员姓名：">
              {{studentInfo.name}}
            </el-form-item>
            <el-form-item label="次课类型：">
              {{studentInfo.timesName}}
            </el-form-item>
            <el-form-item label="有效期：">
              <!-- {{new Date(studentInfo.expiresStartTime).format()}}~{{new Date(studentInfo.expiresEndTime + studentInfo.freezeDay * 86400000).format()}} -->
              {{new Date(studentInfo.expiresStartTime).format()}}~{{new Date(studentInfo.expiresEndTime).format()}}
            </el-form-item>
            <el-form-item label="冻结期：" prop="date">
              <!-- :rules="[{ required: true, message: '请输入冻结日期'}]" -->
              <el-date-picker
                v-model="form.date"
                type="daterange"
                size="small"
                placeholder="请选择冻结日期"
                range-separator="~"
                @change="handleDate(form.date)"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="冻结后，有效期为：">
              <div v-if="showDate">
                未设置冻结日期
              </div>
              <div v-else>
                <p>{{new Date(studentInfo.expiresStartTime).format()}}~{{startDate}}</p>
                <p>
                  <span v-if="isFreezeTime">{{endDate}}~{{new Date((studentInfo.expiresEndTime + freezeTime)).format()}}</span>
                  <span v-else>{{endDate}}~{{new Date((studentInfo.expiresEndTime + studentInfo.freezeDay * 86400000)).format()}}</span>
                </p>
              </div>
            </el-form-item>
            <el-form-item label="冻结原因："> 
              <el-input class="textarea-height" v-model.trim="form.reason" placeholder="请填写原因" :maxlength="200" type="textarea" :rows="10" number-word />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit('form')">确 定</el-button>
              <el-button @click="handleCancel">取 消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else class="expiration_date">
          有效期未设置，请先设置！！！
        </div>
      </div>
      <div v-else>
        <el-row>
          <el-col :span="3">冻结期：</el-col>
          <el-col :span="21">
            {{new Date(freezeDetailInfo.freezeStartTime).format()}}-{{new Date(freezeDetailInfo.freezeEndTime).format()}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">冻结原因：</el-col>
          <el-col :span="20">
            {{freezeDetailInfo.freezinCause ? freezeDetailInfo.freezinCause : '无'}}
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { form } from 'utils/mixins'
import api from 'api/train'
export default {
  mixins: [form],
  props: {
    isFreeze: {
      type: Boolean,
      default: true
    },
    studentInfo: {
      type: Object
    }
  },
  data () {
    let endValid = this.studentInfo.expiresEndTime
    let startValid = this.studentInfo.expiresStartTime
    return {
      visible: true,
      startDate: '',
      endDate: '',
      freezeTime: '',
      isFreezeTime: true,
      labelPosition: 'right',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > endValid || time.getTime() < startValid
        }
      },
      form: {
        date: '',
        reason: ''
      },
      freezeDetailInfo: '',
      showDate: true
    }
  },
  mounted () {
    api.freezeDetail({studentClassId: this.studentInfo.studentClassId}).then(res => {
      if (res.data) {
        this.isFreezeTime = false
        this.freezeDetailInfo = res.data
        this.startDate = new Date(this.freezeDetailInfo.freezeStartTime).format()
        this.endDate = new Date(this.freezeDetailInfo.freezeEndTime).format()
        this.freezeTime = this.freezeDetailInfo.freezeEndTime - this.freezeDetailInfo.freezeStartTime
        this.form.date = [this.freezeDetailInfo.freezeStartTime, this.freezeDetailInfo.freezeEndTime]
        this.showDate = false
      }
    })
  },
  watch: {
    'form.date' (value) {
      if (!value || value[0] === null) {
        this.showDate = true
        this.startDate = this.endDate = null
      } else {
        this.showDate = false
      }
    }
  },
  methods: {
    handleCancel () {
      this.$emit('input', false)
    },
    handleDate (value) {
      if (value) {
        this.isFreezeTime = true
        this.startDate = new Date(value[0]).format()
        this.endDate = new Date(value[1]).format()
        this.freezeTime = (new Date(value[1]).getTime() - new Date(value[0]).getTime()) === 0 ? 86400000 : new Date(value[1]).getTime() - new Date(value[0]).getTime() + 86400000
      }
    },
    submit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let obj = {
            freezeStartTime: this.startDate ? new Date(this.startDate).getTime() : null,
            freezeEndTime: this.endDate ? new Date(this.endDate).getTime() : null,
            freezinCause: this.form.reason,
            studentClassId: this.studentInfo.studentClassId
          }
          api.freeze(JSON.stringify(obj)).then(res => {
            this.$emit('success').$emit('input', false)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .freeze_student {
    .el-textarea {
      width: 85%;
    }
    .textarea-height{
      .el-textarea__inner{
        height: 80px;
      }
    }
    .el-dialog--small {
      min-height: 250px;
    }
    .el-row {
      line-height: 30px;
    }
    .expiration_date {
      margin: 50px;
      font-size: 15px;
    }
  }
</style>
